<template>
	<div id="NavView">
		<ul :class="shkey == true ?'in' : 'on'">
			<li @click="$router.push('/')">
				<span class="iconfont icon-shouye"></span>
			</li>
			<li @click="$router.push('/cart')">
				<span class="iconfont icon-gouwuchekong"></span>
			</li>
			<li @click="$router.push('/user')">
				<span class="iconfont icon-wode"></span>
			</li>
		</ul>
		<img src="@/assets/top.png" id="top_top" v-show="goTopShow" @click="goTop">
		<div class="top" @click="shkey = !shkey">
			<img src="@/assets/navbtn_close.gif" alt="">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shkey: false,
				scrollTop: 0, //默认距离顶部的距离
				isShow: false, //控制返回顶部按钮的显隐
				scrollTrigger: false, //默认初始值
				scrollTop: "", // 距离
				goTopShow: false, // 是否显示

			}
		},
		watch: {
			scrollTop(val) {
				if (this.scrollTop > 500) {
					this.goTopShow = true;
				} else {
					this.goTopShow = false;
				}
			}
		},
		methods: {
			handleScroll() {
				this.scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				if (this.scrollTop > 500) {
					this.goTopShow = true;
				}
			},
			goTop() {
				let timer = null,
					_that = this;
				cancelAnimationFrame(timer);
				timer = requestAnimationFrame(function fn() {
					if (_that.scrollTop > 0) {
						_that.scrollTop -= 50;
						document.body.scrollTop = document.documentElement.scrollTop =
							_that.scrollTop;
						timer = requestAnimationFrame(fn);
					} else {
						cancelAnimationFrame(timer);
						_that.goTopShow = false;
					}
				});
			}
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);
		},
		destroyed() {
			window.removeEventListener("scroll", this.handleScroll);
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#NavView {
		position: fixed;
		bottom: 100 * $width;
		right: 20 * $width;
		z-index: 9999;
		display: flex;
		justify-content: space-between;


		#top_top {
			display: inline-block;
			height: 44 * $width;
			width: 44 * $width;
			position: absolute;
			bottom: 50 * $width;
			right: 0;
		}

		.top {
			position: relative;
			z-index: 9999999;
			height: 44 * $width;
			width: 44 * $width;
			background: #e93323;
			border-radius: 22 * $width;

			img {
				width: 100%;
				height: 100%;
			}

			.show {
				display: block !important;
			}
		}

		ul {
			width: 150 * $width;
			height: 43 * $width;
			display: flex;
			margin-right: 10 * $width;
			justify-content: space-between;
			align-items: center;
			background: #e93323;
			border-radius: 22 * $width;
			overflow: hidden;
			transform: translateX(100px);
			opacity: 0;
			transition: .5s;

			li {
				flex: 1;
				text-align: center;

				span {
					font-size: 24 * $width;
					color: #fff;
				}
			}
		}

		.on {
			transform: translateX(40 * $width);
			opacity: 0;
		}

		.in {
			transform: translateX(0);
			opacity: 1;
		}
	}
</style>
